<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- react核心库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<!-- 支持react操作DOM -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<!-- 引入Babel，用于将JSX转换为JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<!-- prop-types -->
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>

</head>
<body>
<div id="test1"></div>
<script type="text/babel"> 
    function Person(props){
        return(
            <ul>
                <li>姓名:{props.name}</li>
                <li>年龄:{props.sex}</li>
                <li>性别:{props.age}</li>
            </ul>
        )
    }

    Person.defaultProps = {
            sex:'Male',
        }

    Person.propTypes = {
            name: PropTypes.string.isRequired,
            age: PropTypes.number,
            sex: PropTypes.string,
        }


    ReactDOM.render(<Person name={100} sex="Female" age={18}/>,document.getElementById('test1'))
</script>
</body>
</html>